import React, { PureComponent } from 'react';
import * as echarts from 'echarts';

class UserBehaviorPie extends PureComponent {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
    this.chart = null;
  }

  componentDidMount() {
    this.initChart();
    this.resizeHandler = () => {
      if (this.chart) {
        this.chart.resize();
      }
    };
    window.addEventListener('resize', this.resizeHandler);
  }

  componentDidUpdate() {
    this.updateChart();
  }

  componentWillUnmount() {
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler);
    }
    if (this.chart) {
      this.chart.dispose();
    }
  }

  initChart = () => {
    try {
      const chartDom = this.chartRef.current;
      
      // 强制重置所有可能的变换和方向
      const resetStyles = {
        direction: 'ltr',
        transform: 'none',
        webkitTransform: 'none',
        mozTransform: 'none',
        msTransform: 'none',
        oTransform: 'none',
        textAlign: 'left',
        writingMode: 'horizontal-tb',
        unicodeBidi: 'normal'
      };
      
      Object.assign(chartDom.style, resetStyles);
      
      // 为父容器也应用重置
      let parent = chartDom.parentElement;
      while (parent && parent !== document.body) {
        Object.assign(parent.style, {
          transform: 'none !important',
          direction: 'ltr !important'
        });
        parent = parent.parentElement;
      }
      
      this.chart = echarts.init(chartDom, null, {
        renderer: 'canvas'
      });
      
      this.updateChart();
    } catch (error) {
      console.error('饼图初始化失败:', error);
    }
  };

  updateChart = () => {
    if (!this.chart || !this.props.data) return;

    const data = this.props.data;
    
    const option = {
      backgroundColor: 'transparent',
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        textStyle: {
          color: '#ffffff',
          fontSize: 12
        },
        formatter: function(params) {
          return `${params.name}<br/>数量: ${params.value.toLocaleString()}<br/>占比: ${params.percent}%`;
        }
      },
      legend: {
        orient: 'vertical',
        right: '10%',
        top: 'middle',
        textStyle: {
          color: '#ffffff',
          fontSize: 14
        },
        itemGap: 12,
        itemWidth: 18,
        itemHeight: 14,
        formatter: function(name) {
          return name;
        }
      },
      series: [
        {
          name: '用户行为',
          type: 'pie',
          radius: ['30%', '75%'],
          center: ['50%', '50%'],
          data: data.map(item => ({
            name: item.name,
            value: item.value,
            itemStyle: {
              color: item.color,
              borderColor: '#ffffff',
              borderWidth: 1,
              shadowColor: item.color,
              shadowBlur: 5
            }
          })),
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              borderWidth: 2,
              borderColor: '#ffffff'
            },
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold',
              color: '#ffffff'
            }
          },
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: function (idx) {
            return idx * 200;
          }
        }
      ]
    };

    this.chart.setOption(option, true);
  };

  render() {
    return (
      <div 
        style={{
          width: '100%',
          height: '100%',
          minHeight: '180px',
          position: 'relative',
          isolation: 'isolate',
          transform: 'translateZ(0)',
          direction: 'ltr',
          writingMode: 'horizontal-tb',
          textOrientation: 'mixed',
          unicodeBidi: 'normal'
        }}
      >
        <div 
          ref={this.chartRef} 
          style={{ 
            width: '100%', 
            height: '100%',
            direction: 'ltr',
            transform: 'none',
            textAlign: 'left',
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 1
          }}
        />
      </div>
    );
  }
}

export default UserBehaviorPie;